<template>
  <div>
    <Heads :right-flag="false" :title="oType.title"></Heads>
    <div style="padding-bottom: 50px;">
      <van-grid :border="false" gutter="10px" :column-num="2" v-if="List.length>0">
        <van-grid-item
          v-for="(l) in List"
          :key="l.goods_id"
          :text="l.goods_info.title"
          :to="{
                name: 'Classify-details-tradeItemId',
                params: { 'tradeItemId': l.goods_id }
              }"
        >
          <van-image :src="l.goods_info.picture" lazy-load width="100%" height="90%" />
          <div class="goods_info">
            <b
              class="price_info"
              style="font-size:12px;margin-right: 8px;"
            >¥{{ (l.sku.price*1).toFixed(2) }}</b>

            <span class="fav_num">
              <van-tag type="warning">new</van-tag>
            </span>
          </div>
        </van-grid-item>
      </van-grid>
      <van-empty
        v-else
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        :description="oType.desc + ', 赶紧去看看吧'"
      />
    </div>
  </div>
</template>

<script>
import { post } from "@/utils/axios";
import { mapState } from "vuex";
import Vue from "vue";
import { Grid, GridItem, Image, Lazyload, Tag, Empty } from "vant";
Vue.use(Grid)
  .use(GridItem)
  .use(Image)
  .use(Lazyload)
  .use(Tag)
  .use(Empty);
export default {
  data() {
    return {
      List: []
    };
  },
  computed: {
    ...mapState("userModule", ["userinfo"]),
    oType() {
      const { type } = this.$route.params;
    const { history, collections } = this.userinfo;
      return {
        title: type === "history" ? `浏览历史（${Array.isArray(history)&&history.length || 0}）` : `我的收藏（${Array.isArray(collections)&&collections.length || 0}）`,
        desc: type === "history" ? "历史记录为空" : "暂未收藏任何商品"
      };
    }
  },
  methods: {
    queryOfGoodsid(list) {
      return new Promise((resolve, reject) => {
        post({
          url: "/hybrid/uni/query-of-goodsid",
          // data: payload
          data: {
            list: list
          }
        })
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  },
  mounted() {
    const { type } = this.$route.params;
    const { history, collections } = this.userinfo;
    if (type === "history") {
      if (Array.isArray(history) && history.length > 0) {
        this.queryOfGoodsid(history).then(res => {
          if (res.status >= 0) {
            this.List = res.result;
          }
        });
      }
    } else {
      if (Array.isArray(collections) && collections.length > 0) {
        this.queryOfGoodsid(collections).then(res => {
          if (res.status >= 0) {
            this.List = res.result;
          }
        });
      }
    }
  }
};
</script>

<style>
</style>